<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登陆</title>
    <link type="text/css" rel="stylesheet" href="../plugin/bootstrap-3.3.7-dist/css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" href="../plugin/layer/mobile/need/layer.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style rel="stylesheet" type="text/css">
        .friend:hover {
            background-color: #dff0d8;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <h3>测试聊天室 {{status}}</h3>
        </el-header>
        <el-container>
            <el-aside width="300px">
                <ul class="list-group" v-for="(u,index) in users">
                    <li v-if="u.username != me.username"
                        @click="change(index)">
                        {{u.username}} [<label class="danger" v-if="u.status == '1'">在线</label><label class="primary"
                                                                                                      v-if="u.status != '1'">离线</label>]
                    </li>
                </ul>
            </el-aside>
            <el-main>
                <el-card>
                    <div slot="header" class="clearfix">
                        <h3>{{message.towho}}</h3>
                    </div>
                    <div>
                        <ul v-for="m in historyMessage">
                            <li>{{m.username}}:{{m.message}}</li>
                        </ul>
                    </div>
                </el-card>
                <el-card>
                    <el-input type="text" v-model:value="message.msg" rows="3"></el-input>
                    <el-button @click="send" class="btn btn-success">发送</el-button>
                    <el-button class="btn btn-danger">清空</el-button>
                </el-card>
            </el-main>
        </el-container>
        <el-footer class="item">
            <el-row align="center">版权所有@black</el-row>
        </el-footer>
    </el-container>
</div>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="../plugin/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../plugin/layer/layer.js"></script>
<!-- 引入组件库 -->

<script type="text/javascript" src="../js/core.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                user: {
                    username: "",
                    password: "",
                },
                me: {},
                users: [],
                message: {
                    towho:"",
                    to: "",
                    from:"我",
                    msg: ""
                },
                status: "",
                historyMessage: [],
                fullscreenLoading: false
            }
        },
        created: function () {
            this.openFullScreen();
            var parent = this;
            this.getMe();
            this.load();
            this.ws = new WebSocket(wshost);
            this.ws.onopen = function () {
                parent.status = "在线";
                parent.closeFs();
            };
            this.ws.onclose = function () {
                layer.msg("服务端已经下线");
                parent.status = "已离线";
            };
            this.ws.onmessage = function (evt) {
                var msg = evt.data;
                var var1 = JSON.parse(msg);
                parent.historyMessage.push({msg: var1.msg});
                var var2 = var1.tips;
                if (var2 != undefined) {
                    layer.msg(var2);
                } else {
                    layer.msg('已接收');
                }
            };
            this.loadMsg();
        },
        methods: {
            login: function (event) {
                console.log("login" + this.user.username)
                if (this.user.username == "") {
                    return
                }
                CMPostServer("/api/user/login", this.user, function (data) {
                    if (0 == data.code) {
                        window.location = "user.html";
                    } else {
                        layer.msg(data.msg)
                    }
                });
            },
            load: function (event) {
                var parent = this;
                CMGetServer("/api/user/list/all", {}, function (data) {
                    if (0 == data.code) {
                        parent.users = data.users;
                    } else {
                        layer.msg(data.msg)
                    }
                });
            },
            loadMsg:function(){
                var parent = this;
                CMGetServer("/api/user/list/msg/all", {}, function (data) {
                    if (0 == data.code) {
                        parent.historyMessage = data.data.page;
                    } else {
                        layer.msg(data.msg)
                    }
                });
            },
            send: function (event) {
                var parent = this;
                CMPostServer("/api/user/send", this.message, function (data) {
                    if (0 == data.code) {
                        layer.msg("发送成功")
                        parent.historyMessage.push({
                            message: parent.message.msg,
                            username:"我",
                            revname:parent.message.towho
                        });
                        parent.message.msg = "";
                        parent.message.towho = "";
                    } else {
                        layer.msg(data.msg)
                    }
                })
            },
            change: function (index) {
                var u = this.users[index]
                this.message.to = u.id;
                this.message.towho = u.username;
            },
            getMe: function (event) {
                var parent = this;
                CMGetServer("/api/user/get/me", {}, function (data) {
                    if (0 == data.code) {
                        parent.me = data.user;
                    } else {
                        layer.msg(data.msg)
                    }
                })
            },
            openFullScreen() {
                this.fullscreenLoading = true;
            },
            openFullScreen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            },
            closeFs: function () {
                this.fullscreenLoading = false;
                this.loading.close()
            }
        }
    })
</script>
</body>
</html>